﻿<template>
  <div class="base-order-type-manage-page">
    <div class="divider"></div>
    <div class="management-card main-management-card">
      <div class="top-head">
        <span>主类型</span>
        <a @click="onMainAdd"><a-icon type="plus" /></a>
      </div>
      <div class="content" ref="content">
        <a-table v-if="th" :data-source="list1" :columns="columns1" rowKey="id" :pagination="false" :scroll="{x:580,y:th}">
          <template slot="linkSlot" slot-scope="text,record">
            <a @click="onActiveMain(record)">{{text}}</a>
          </template>
          <template slot="action" slot-scope="text,record,index">
            <a style="margin-right:8px;" @click="onEdit(record)"><a-icon type="edit" /></a>
            <a @click="onDelete(record)"><a-icon type="delete" /></a>
          </template>
        </a-table> 
      </div>
    </div>
    <div class="divider"></div>
    <div class="management-card sub-management-card">
      <div class="top-head">
        <span><span style="margin-right:8px;" v-if="activeMainObj.name">{{activeMainObj.name}}</span>子类型明细</span>
        <a @click="onDetailAdd" v-if="activeMainObj.id"><a-icon type="plus" /></a>
      </div>
      <div class="content" ref="content">
        <a-table v-if="th" :data-source="list2" :columns="columns2" rowKey="id" :pagination="false" :scroll="{x:580,y:th}">
          <template slot="lesWorkShopTypeSlot" slot-scope="text">
            {{ 'les_workshop_type' | dictType(text) }}
          </template>
          <template slot="action" slot-scope="text,record,index">
            <a style="margin-right:8px;" @click="onEdit(record)"><a-icon type="edit" /></a>
            <a @click="onDelete(record)"><a-icon type="delete" /></a>
          </template>
        </a-table> 
      </div>
    </div>
    <div class="divider"></div>
    
    <edit-form :visible.sync="formVisible" :type="formType" :obj="formObj" :p-obj="formParentObj" @callback="editBack" />
  </div>
</template>
<script>
  import { WareOrderTypePage, WareOrderTypeDelete } from '@/api/modular/main/WmsOrderTypeManage'
  import editForm from './editForm.vue'
  let interval = null
  export default {
    components: {editForm},
    data () {
      return {
        list1:[],
        list2:[],
        th:0,
        columns1:[
          { title: '类型编码', dataIndex: 'code', scopedSlots: { customRender: 'linkSlot' } },
          { title: '类型名称', dataIndex: 'name', scopedSlots: { customRender: 'linkSlot' } },
          { title: '排序', dataIndex: 'sort', key: 'sort' },
          { title: '操作', key: 'action', width: 70, align:'center', fixed:"right", scopedSlots: { customRender: 'action' }}
        ],
        columns2:[
          { title: '类型编码', dataIndex: 'code', key: 'code' },
          { title: '类型名称', dataIndex: 'name', key: 'name' },
          { title: '排序', dataIndex: 'sort', key: 'sort' },
          { title: '所属车间', dataIndex: 'lesWorkShopType', scopedSlots: { customRender: 'lesWorkShopTypeSlot' } },
          { title: '操作', key: 'action', width: 70, align:'center', fixed:"right", scopedSlots: { customRender: 'action' }}
        ],
        formVisible:false,
        formType:'',
        formObj:{},
        formParentObj:{},
        activeMainObj:{}
      }
    },
    mounted () {
      this.calTh()
      this.getMainList()
    },
    methods: {
      calTh(){
        interval = window.setInterval(()=>{
          if (this.th) {
            window.clearInterval(interval)
            interval = null
          } else {
            this.th = this.$refs.content.clientHeight - 55
          }
        },100)
      },
      getMainList(){
        this.getList(0)
        this.list2 = []
        this.activeMainObj = {}
      },
      getList(pid){
        this.$loading.show()
        WareOrderTypePage(pid).then(d=>{
          let arr = (d.data || []).map((item)=>{
            item.lesWorkShopType = String(item.lesWorkShopType)
            return item
          })
          if (pid===0){
            this.list1=arr
          } else {
            this.list2=arr
          }
          this.$loading.hide()
        }).catch(()=>{
          this.$loading.hide()
        })
      },
      onMainAdd(){
        this.formType = 'add'
        this.formObj = {}
        this.formParentObj = {}
        this.formVisible = true
      },
      onDetailAdd(){
        this.formType = 'add'
        this.formObj = {}
        this.formParentObj = this.activeMainObj
        this.formVisible = true
      },
      onEdit(obj){
        this.formType = 'edit'
        this.formObj = obj
        if (obj.pid===0) {
          this.formParentObj = {}
        } else {
          this.formParentObj = this.activeMainObj
        }
        this.formVisible = true
      },
      editBack(){
        if (!this.formParentObj.id) {
          this.getMainList()
        } else {
          this.getList(this.formParentObj.id)
        }
      },
      onDelete(obj){
        this.$confirm({
          title: '确定要进行删除操作吗？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk:()=>{
            this.handleDelete(obj.id,(f)=>{
              if (f) {
                if (obj.pid===0) {
                  this.getMainList()
                } else {
                  this.getList(this.activeMainObj.id)
                }
              }
            })
          }
        });
      },
      handleDelete(id,callback){
        this.$loading.show()
        let params = {id}
        WareOrderTypeDelete(params).then(()=>{
          this.$loading.hide()
          callback(true)
        }).catch(()=>{
          this.$loading.hide()
          callback(false)
        })
      },
      onActiveMain(obj){
        this.activeMainObj = obj
        this.getList(obj.id)
      }
    },
    beforeDestroy(){
      try{
        window.clearInterval(interval)
        interval = null
      }catch(e){
        //TODO handle the exception
      }
    }
  }
</script>
<style lang="less" scoped>
.base-order-type-manage-page{
  height: 100%;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  @dividerSize:16px;
  padding: @dividerSize 0;
  .divider {
    width: @dividerSize;
    flex-shrink: 0;
  }
  .management-card{
    width: 1px;
    flex-grow: 1;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &.main-management-card{
      flex-grow: 2;
    }
    &.sub-management-card{
      flex-grow: 3;
    }
    &>.top-head {
      flex-shrink: 0;
      border-bottom: 1px solid #d9d9d9;
      padding: 8px 16px;
      font-size: 1.2em;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &>.content {
      height: 1px;
      flex-grow: 1;
    }
  }
}
</style>
